<template>
    <!-- 添加或修改trainingDay对话框 -->
    <div v-if="dialogVisible">
        <el-dialog :title="title" :visible.sync="dialogVisible" append-to-body @close="cancel">
            <el-form ref="form" :model="form" :rules="rules" label-width="120px" :inline="true" v-loading="loading">
                <el-form-item label="训练科目" required>
                    <el-cascader :value="subjectValue" :options="subjectList" :props="{ expandTrigger: 'hover',children:'twoList',label:'dictLabel',value:'dictValue' }" @change="handleChange" size="small" style="300px" ref="subjectRef" :disabled="changeDisabled"></el-cascader>
                </el-form-item>
                <el-form-item label="训练时长" required style="width:400px">
                    <el-col :span="11">
                        <el-form-item style="width:120px" prop="startTime">
                            <el-time-select placeholder="起始时间" v-model="form.startTime" :picker-options="{start: '06:00',step: '00:05',end: '21:00'}" style="width:120px">
                            </el-time-select>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" style="width:8px" :span="2">-</el-col>
                    <el-col :span="11">
                        <el-form-item style="width:120px" prop="endTime">
                            <el-time-select placeholder="结束时间" v-model="form.endTime" :picker-options="{start: '06:00',step: '00:05',end: '21:00',minTime: form.startTime}" style="width:120px">
                            </el-time-select>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="四时" prop="fourSeasons" required>
                    <el-select v-model="form.fourSeasons" placeholder="请选择四时" clearable size="small">
                        <el-option v-for="dict in fourSeasonsOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
                    </el-select>
                </el-form-item>
                <el-form-item v-if="subjectValue[0]=='special_training_water' || subjectValue[0]=='land_specific_training_dynamometer'" label="组数" prop="numberGroups" required>
                    <el-input v-model.number="form.numberGroups" placeholder="请输入组数" />
                </el-form-item>
                <el-form-item v-if="subjectValue[0]=='special_training_water' || subjectValue[0]=='land_specific_training_dynamometer'" label="训练手段" prop="trainingMode" required>
                    <el-select v-model="form.trainingMode" placeholder="请选择训练手段" clearable size="small">
                        <el-option v-for="trainingWay in trainingModeOptions" :key="trainingWay.value" :label="trainingWay.label" :value="trainingWay.value" />
                    </el-select>
                </el-form-item>
                <el-form-item v-if="subjectValue[0]=='special_training_water' && form.trainingMode!='1' || subjectValue[0]=='land_specific_training_dynamometer' && form.trainingMode!='1'" label="公里数(m)" prop="kilometers" required>
                    <el-input v-model.number="form.kilometers" placeholder="请输入公里数(单位:米)" />
                </el-form-item>
                <el-form-item v-if="subjectValue[0]=='special_training_water'&& form.trainingMode!='0' || subjectValue[0]=='land_specific_training_dynamometer' && form.trainingMode!='0'" label="时间(分钟)" prop="classHour" required>
                    <el-select v-model="form.classHour" placeholder="请选择时间" clearable size="small">
                        <el-option v-for="timeMeans in timeMeansOptions" :key="timeMeans.dictValue" :label="timeMeans.dictLabel" :value="timeMeans.dictValue" />
                    </el-select>
                </el-form-item>
                <el-form-item v-if="subjectValue[0]=='special_training_water' || subjectValue[0]=='land_specific_training_dynamometer' || subjectValue[0]=='land_strength_training'" label="间歇时间(分钟)" prop="gapTime">
                    <el-input v-model="form.gapTime" placeholder="请输入间歇时间" />
                </el-form-item>
                <el-form-item v-show="subjectValue[0]=='special_training_water' || subjectValue[0]=='land_specific_training_dynamometer'" label="热身公里数(m)" prop="warmUpKilometers">
                    <el-input v-model="form.warmUpKilometers" placeholder="热身公里数(单位:米)" />
                </el-form-item>
                <!-- <el-form-item v-show="subjectValue[0]=='special_training_water' || subjectValue[0]=='land_specific_training_dynamometer'" label="课程要求" class="form-textarea" style="width:100%">
                    <el-input type="textarea" v-model="form.srMemo" :autosize="{ minRows: 3, maxRows: 10}" clearable placeholder="请输入课程要求"></el-input>
                </el-form-item> -->
                <el-form-item v-show="subjectValue[0]=='special_training_water' || subjectValue[0]=='land_specific_training_dynamometer'" label="训练方案" prop="schemeId">
                    <el-select v-model="form.schemeId" placeholder="请选择方案" clearable size="small" @click.native="selectScheme">
                        <el-option v-for="item in schemeList" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="课时完成度(%)" prop="completion">
                    <el-select v-model="form.completion" placeholder="请选择课时完成度" clearable size="small">
                        <el-option v-for="item in completionOptions" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { addTrainingDay, updateTrainingDay, subjectLevelTree } from "@/api/training/trainingDay";
import { schemeList } from "@/api/training/scheme";
export default {
    name: "trainingProjectDialog",
    // 接收父组件的值
    props: {
        projectDialogVisible: Boolean
    },
    data() {
        return {
            // 遮罩层
            loading: false,
            // 选中数组
            // 弹出层标题
            title: "",
            //四时
            fourSeasonsOptions: [],
            // 训练科目级联列表
            subjectList: [],
            // 选中科目项
            subjectValue: [],
            //训练周名称集合
            weekNameList: [],
            //训练模式
            trainingModeOptions: [
                { value: 0, label: '公里数' },
                { value: 1, label: '时间' }
            ],
            // 完成度百分比选项
            completionOptions: [
                { value: 0, label: '0%' },
                { value: 0.05, label: '5%' },
                { value: 0.1, label: '10%' },
                { value: 0.15, label: '15%' },
                { value: 0.2, label: '20%' },
                { value: 0.25, label: '25%' },
                { value: 0.3, label: '30%' },
                { value: 0.35, label: '35%' },
                { value: 0.4, label: '40%' },
                { value: 0.45, label: '45%' },
                { value: 0.5, label: '50%' },
                { value: 0.55, label: '55%' },
                { value: 0.6, label: '60%' },
                { value: 0.65, label: '65%' },
                { value: 0.7, label: '70%' },
                { value: 0.75, label: '75%' },
                { value: 0.8, label: '80%' },
                { value: 0.85, label: '85%' },
                { value: 0.9, label: '90%' },
                { value: 0.95, label: '95%' },
                { value: 1, label: '100%' },
            ],
            // 时间手段集合
            timeMeansOptions: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                weekId: undefined,
                day: undefined,
                firstLevel: undefined
            },
            // 选项是否禁用
            changeDisabled: false,
            // 表单参数
            form: {},
            // 方案列表
            schemeList: [],
            // 表单校验
            rules: {
                startTime: [{ required: true, message: "请选择开始时间", trigger: "change" }],
                endTime: [{ required: true, message: "请选择结束时间", trigger: "change" }],
                fourSeasons: [{ required: true, message: "请选择四时", trigger: "change" }],
                numberGroups: [
                    { required: true, message: "请输入组数", trigger: "blur" },
                    { type: 'number', message: "请输入纯数字", trigger: "blur" }
                ],
                trainingMode: [{ required: true, message: "请选择训练手段", trigger: "change" }],
                kilometers: [
                    { required: true, message: "请输入公里数", trigger: "blur" },
                    { type: 'number', message: "请输入纯数字", trigger: "blur" }
                ],
                classHour: [{ required: true, message: "请选择时间", trigger: "change" }]
            },
            // 方案查询参数
            schemeParams: {
                firstLevel: undefined,
                secondLevel: undefined,
                name: undefined,
                intervalTime: undefined,
                targetValue: undefined,
                trainingMode: undefined,
                groupNumber: undefined
            }
        };
    },
    computed: {
        dialogVisible: {
            set(val) {
                this.$emit('close', val) // 触发子组件关闭弹框事件
            },
            get() {
                return this.projectDialogVisible // 表示获取父组件的值
            }
        }
    },
    watch: {

    },
    created() {
        //训练项目字典
        this.getDicts("four_time").then(response => {
            this.fourSeasonsOptions = response.data;
        });
        //训练时间手段字典
        this.getDicts("time_means").then(response => {
            this.timeMeansOptions = response.data;
            console.log(this.timeMeansOptions)
        });
        this.getSubjectLevelList();

    },
    methods: {
        // 点击选择方案框
        selectScheme() {
             this.schemeParams.firstLevel=this.form.firstLevel
            this.schemeParams.secondLevel=this.form.secondLevel
            this.schemeParams.groupNumber=this.form.numberGroups
            this.schemeParams.intervalTime=this.form.gapTime
            this.schemeParams.trainingMode=this.form.trainingMode
            if(this.form.trainingMode==0){
                this.schemeParams.targetValue=this.form.kilometers
            }else{
                this.schemeParams.targetValue=this.form.classHour
            }
            
            console.log(this.schemeParams)
            this.getSchemeList()
        },
        // 获取训练方案列表
        getSchemeList() {
            // this.loading = true
            schemeList(this.schemeParams).then((response) => {
                if (response.code == '200') {
                    this.schemeList = response.rows;
                    // this.loading = false
                } else {
                    this.msgError('请求失败');
                    // this.loading = false
                }
            })
        },
        handleAdd(weekId, day) {
            this.title = '新增训练计划'
            this.subjectValue = []
            this.form.weekId = weekId
            this.form.day = day
        },
        handleEdit(row) {
            this.title = '修改训练计划'
            console.log(row)
            this.form = row
            this.subjectValue = [row.firstLevel, row.secondLevel]
            // this.changeDisabled=true
        },
        // 一级科目二级科目级联选择
        handleChange(value) {
            this.subjectValue = value
            // 点击保存的时候存储一级科目二级科目值
            this.form.firstLevel = value[0]
            this.form.secondLevel = value[1]
            this.form.firstLevelName = this.$refs["subjectRef"].getCheckedNodes()[0].pathLabels[0]
            this.form.secondLevelName = this.$refs["subjectRef"].getCheckedNodes()[0].pathLabels[1]
        },
        // 查询s训练科目列表
        getSubjectLevelList() {
            subjectLevelTree().then((response) => {
                this.subjectList = this.getTreeData(response.data)
            })
        },
        // 递归判断列表，把最后的children设为删除
        getTreeData(data) {
            for (var i = 0; i < data.length; i++) {
                if (data[i].twoList == null) {
                    // children若为空数组，则将children设为undefined
                    delete data[i].twoList;
                } else {
                    // children若不为空数组，则继续 递归调用 本方法
                    this.getTreeData(data[i].twoList);
                }
            }
            return data;
        },
        // 取消按钮
        cancel() {
            this.dialogVisible = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                id: undefined,
                weekId: undefined,
                weekName: undefined,
                fourSeasons: undefined,
                firstLevel: undefined,
                secondLevel: undefined,
                classHour: undefined,
                kilometers: undefined,
                sr: undefined,
                hr: undefined,
                numberGroups: undefined,
                gapTime: undefined,
                firstLevel: undefined,
                startTime: undefined,
                endTime: undefined,
                trainingMode: 0,
                schemeId: undefined
            };
            this.resetForm("form");
        },
        /** 提交按钮 */
        submitForm() {
            console.log(this.form)
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.loading = true
                    if (this.form.id != undefined) {
                        updateTrainingDay(this.form).then(response => {
                            if (response.code === 200) {
                                this.dialogVisible = false;
                                this.$emit('submitProject')
                                this.msgSuccess("修改成功");
                                this.loading = false
                                this.reset();
                            } else {
                                this.msgError(response.msg);
                            }
                        });
                    } else {
                        addTrainingDay(this.form).then(response => {
                            if (response.code === 200) {
                                this.dialogVisible = false;
                                this.$emit('submitProject')
                                this.msgSuccess("新增成功");
                                this.loading = false
                                this.reset();
                            } else {
                                this.msgError(response.msg);
                            }
                        });
                    }
                }
            });
        },
    }
};
</script>
<style lang="scss" scoped>
.el-form {
    padding-top: 20px;
}
.el-form--inline .el-form-item {
    width: 320px;
    .el-input {
        width: 180px;
    }
    .el-select {
        width: 180px;
    }
    .el-textarea {
        width: 400px;
    }
}
.form-item2 .el-form-item {
    width: 80px;
    .el-input {
        width: 80px;
    }
}
.form-item2 .line {
    width: 1px;
    text-align: center;
    margin-right: 10px;
}
</style>